<template>
  <div>
    <header>
      <BaseNavBar title="活动" isNav="true" />
    </header>
    <main style="margin-top: 8px;" v-if="dataSource.length > 0">
      <Card style="margin-top: 8px;" v-for="item in dataSource" :key="item?.id">
        <p class="activity_name">活动名称：{{ item?.title }}</p>
        <p :class="['van-multi-ellipsis--l3','activity_content']">活动内容：{{ item?.content }}</p>
        <p class="activity_time">活动时间：{{ `${item?.startTime}~${item?.endTime}` }}</p>
      </Card>
    </main>
    <van-empty image="error" v-if="!dataSource.length" description="暂无活动" />
    <section style="height: 80px;"></section>
  </div>
</template>

<script setup>
import BaseNavBar from '@/components/BaseNavBar/index.vue';
import Card from '@/components/Card/index.vue';
import { ref,onMounted} from 'vue';
import {getActivityList} from '@/apis/activity'

const dataSource = ref([]);


const init = async () => {
  const {data=[]} = await getActivityList();
  dataSource.value = data?.list;

};

onMounted(() => {
  init()
});
</script>

<style lang="less" scoped>
.activity{
  &_name{
    font-size: 14px;
    color: #333;
  }
  &_content{
    font-size: 12px;
    color: #999;
  }
  &_time{
    font-size: 12px;
    color: #666;
  }
}
</style>
